<template>
  <div class="edit_form">
    <!-- 编辑页 -->
    <edu-form
      size="big"
      class="mini-form-item inline-form"
      :title="textMap[dialogStatus]"
      width="70%"
      top="55px"
      @ok="viewType === 'create' ? createData() : updateData()"
      @cancel="handelCancel"
    >
      <a-form-model ref="veJkyFundDataForm" :rules="veJkyFundRules" :model="veJkyFundVo" labelAlign="right">
        <a-form-model-item label="项目" prop="projectId">
          <jkyProjectSelect ref="jkyProjectSelect"></jkyProjectSelect>
        </a-form-model-item>
        <a-form-model-item label="项目明细" prop="projectDetail">
          <div class="detail-div">
            <table class="detail-table">
              <tr>
                <th>经费类型</th>
                <th>费用摘要</th>
                <th>费用金额</th>
                <th>操作</th>
              </tr>
              <tbody>
                <tr v-for="(item, index) in detailList" :key="index">
                  <td width="200px" valign="top">
                    <edu-data v-model="item.typeId" stype="select" :datas="typeNodes" textKey="name" dtype="datas" />
                  </td>
                  <td valign="top">
                    <a-textarea v-model="item.content" :maxLength="255" placeholder="请输入费用摘要" :rows="1" />
                  </td>
                  <td valign="top" width="200">
                    <a-input v-model="item.baseCost" placeholder="请输入实际金额" />
                  </td>
                  <td>
                    <edu-pms :code="'detail' + '-btn-delete'" name="删除" type="danger" size="mini" @click="handleDelete(index)"> </edu-pms>
                  </td>
                </tr>
              </tbody>
            </table>

            <div class="new-detail" @click="doAdd()">
              新增明细
            </div>
          </div>
        </a-form-model-item>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="预算金额" prop="totalCost">
              <a-input v-model="stotalCost" disabled placeholder="请输入预算金额" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="审批人" prop="checkUid">
              <jkyAdminSelect ref="jkyAdminSelect"></jkyAdminSelect>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item label="申请时间" prop="applyTime" required>
          <a-date-picker v-model="veJkyFundVo.applyTime" valueFormat="YYYY-MM-DD" />
        </a-form-model-item>

        <a-form-model-item label="说明" prop="mark" required>
          <a-textarea v-model="veJkyFundVo.mark" :maxLength="300" placeholder="请输入说明" :rows="4" />
        </a-form-model-item>
      </a-form-model>
    </edu-form>
  </div>
</template>

<script>
import veJkyFundApi from '@/module/research/rfunds/api/veJkyFundApi';
import veJkyFundTypeApi from '@/module/research/rfunds/api/veJkyFundTypeApi';

import jkyProjectSelect from '@/components/jkyProjectSelect';
import jkyAdminSelect from '@/components/jkyAdminSelect';

export default {
  components: { jkyProjectSelect, jkyAdminSelect },
  data() {
    let validateProject = (rule, value, callback) => {
      const data = this.$refs.jkyProjectSelect.getValue();
      if (data && data.length > 0) {
        callback();
      } else {
        callback(new Error('请选择项目'));
      }
    };
    let validateProjectDetail = (rule, value, callback) => {
      const doubleReg = /^(-?\d+)(\.\d+)?$/;
      if (this.detailList.length == 0) {
        callback(new Error('请完善项目明细'));
      }
      for (let i = 0; i < this.detailList.length; i++) {
        const item = this.detailList[i];
        if (!item.typeId) {
          callback(new Error('请完善项目类型'));
        }
        if (item.baseCost == '' || !doubleReg.test(item.baseCost)) {
          callback(new Error('请完善实际金额'));
        }
      }
      callback();
    };
    let validateUser = (rule, value, callback) => {
      const data = this.$refs.jkyAdminSelect.getValue();
      if (data && data.length > 0) {
        callback();
      } else {
        callback(new Error('请选择审核人'));
      }
    };
    let validatetotalCost = (rule, value, callback) => {
      if (this.stotalCost > 0) {
        callback();
      } else {
        callback(new Error('请完善金额'));
      }
    };
    const data = {
      veJkyFundVo: this.resetveJkyFundVo(),
      textMap: {
        update: '编辑-科研经费预算',
        create: '新增-科研经费预算'
      },
      dialogStatus: 'create',
      veJkyFundRules: {
        projectId: [{ validator: validateProject, trigger: 'change', required: true }],
        projectDetail: [{ validator: validateProjectDetail, trigger: 'change', required: true }],
        checkUid: [{ validator: validateUser, trigger: 'change', required: true }],
        totalCost: [{ validator: validatetotalCost, required: true }]
      },
      typeNodes: [],
      detailList: []
    };
    return data;
  },
  computed: {
    stotalCost() {
      let all = 0;
      this.detailList.forEach(item => {
        try {
          all += parseFloat(item.baseCost) || 0;
        } catch (e) {}
      });
      return all.toFixed(2);
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    doAdd() {
      this.detailList.push({});
    },
    initData() {
      const sub = {
        conditions: [{ operator: 'eq', column: 'status', value: 1 }]
      };
      veJkyFundTypeApi.all(sub).then(res => {
        this.typeNodes = res.result;
      });
    },
    handleDelete(index) {
      if (this.detailList.length <= 1) {
        this.$message.error('最少添加一个明细');
        return;
      }
      this.detailList.splice(index, 1);
    },
    /**
     * @msg: 重置数据
     */
    resetveJkyFundVo() {
      return {
        status: 0, //未审核
        totalCost: '', // 预算金额
        projectId: '', // 项目id
        userId: '', // 申请人
        createTime: '', // 添加时间
        applyTime: '', // 申请时间
        checkUid: '', // 审批人
        mark: '' // 说明
      };
    },
    /**
     * @msg: 初始化新增
     */
    doCreate() {
      this.viewType = 'create';
      this.veJkyFundVo = this.resetveJkyFundVo();
      this.detailList.push({});
      this.$nextTick(() => {
        this.$refs.veJkyFundDataForm.clearValidate();
      });
    },
    /**
     * @msg: 初始化修改
     */
    doUpdate(row) {
      veJkyFundApi.get(row.id).then(res => {
        const data = res.result;
        this.veJkyFundVo = data;
        data.details.forEach(element => {
          element.typeId = parseInt(element.typeId);
        });
        this.detailList = data.details;
        this.$refs.jkyProjectSelect.setValueObj([
          {
            id: data.projectId,
            name: data.projectName
          }
        ]);
      });
      this.viewType = 'update';
      this.$nextTick(() => {
        this.$refs.veJkyFundDataForm.clearValidate();
        this.$refs.jkyAdminSelect.setValue([row.checkUid]);
      });
    },
    /**
     * @msg: 编辑页取消
     */
    handelCancel() {
      this.$emit('onCancel');
    },
    /**
     * @msg: 获取提交的数据 新增和 修改复用
     */
    getSubData(isUpdate) {
      const tempData = Object.assign({}, this.veJkyFundVo);
      tempData.projectId = this.$refs.jkyProjectSelect.getValue()[0];
      tempData.checkUid = this.$refs.jkyAdminSelect.getValue()[0];
      tempData.totalCost = this.stotalCost;
      tempData.details = this.detailList;
      tempData.status = 0;
      return tempData;
    },
    /**
     * @msg: 调用Api创建数据
     */
    createData() {
      this.$refs.veJkyFundDataForm.validate(valid => {
        if (valid) {
          const subData = this.getSubData(false);
          if (subData == null) {
            return;
          }
          veJkyFundApi.add(subData).then(res => {
            this.$notification.success({
              message: '数据新增成功',
              description: '新增了一条数据'
            });
            this.$emit('onOk');
          });
        }
      });
    },
    /**
     * @msg: 调用Api修改数据
     */
    updateData() {
      this.$refs.veJkyFundDataForm.validate(valid => {
        if (valid) {
          const subData = this.getSubData(true);
          if (subData == null) {
            return;
          }
          veJkyFundApi.update(subData).then(() => {
            this.$notification.success({
              message: '数据修改成功',
              description: '修改了一条数据'
            });
            this.$emit('onOk');
          });
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import '~@/module/research/rfunds/css/fund.less';
</style>
